<template>
    <!-- 头部 -->
    <el-header>
      <div class="head_logo">
        <img src="@/assets/logo.png" alt />
        <span>消息推送中心</span>
      </div>
      <div class="right_head">
        <el-button class="modifyButton" @click="showModPwdDialog()"
          >密码修订</el-button
        >
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <el-dropdown>
          <el-button class="modifyButton">
            <span v-text="username"></span>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logoutFn"
              >退出登陆</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
</template>

<script>
import md5 from "js-md5";
import { JSEncrypt } from "jsencrypt";
import localStorageUtil from "@/utils/localStorageUtil";
import {logout } from '@/api/userApi';
export default {
  data() {
    var validatorAccountNumber = (rule, value, callback) => {
      if (
        this.modifyPwdForm.newPassWord !== this.modifyPwdForm.secondPassWord
      ) {
        return callback(new Error("两次密码输入不一致"));
      }
    };
    return {
      username: "admin",
      modifyPwdForm: {
        oldPassWord: "",
        newPassWord: "",
        secondPassWord: ""
      },
      // 修改密码对话框
      modPwdDialogVisible: false,
      modifyPwdFormRules: {
        oldPassWord: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassWord: [
          { required: true, message: "新密码不能为空", trigger: "blur" }
        ],
        secondPassWord: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { validator: validatorAccountNumber, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    encryptedData(publicKey, data) {
      // 新建JSEncrypt对象
      let encryptor = new JSEncrypt();
      // 设置公钥
      encryptor.setPublicKey(publicKey);
      // 加密数据
      return encryptor.encrypt(data);
    },
    // 监听修改密码对话框的关闭事件
    editDialogClosed() {
      this.$refs.modifyPwdFormRef.resetFields();
    },
    // 修改密码对话框显示
    async showModPwdDialog(userId) {
      //去后端查询数据然后赋值
      this.modPwdDialogVisible = true;
    },
    //修改密码
    modifyPassWord() {
      console.log( this.modifyPwdForm.oldPassword);
      let valid1 = true;
      this.$refs["modifyPwdFormRef"].validate(valid => {
        if (valid === false) {
          valid1 = false;
        }
      });
      if (valid1) {
        // nt.doRequest({
        //   method: "post",
        //   uri: "/message/auth/v1/client/user-pubkey",
        //   onSuccess: resp => {
        //     console.log(this.modifyPwdForm.oldPassWord);
        //     debugger
        //     nt.doRequest({
        //       method: "post",
        //       uri: "/message/auth/v1/token/updatePassword",
        //       data: {
        //         oldPassword: this.encryptedData(
        //           resp.data.content,
        //           this.modifyPwdForm.oldPassWord
        //         ),
        //         newPassword: this.encryptedData(
        //           resp.data.content,
        //           this.modifyPwdForm.newPassWord
        //         )
        //       },
        //       onSuccess: resp => {
        //         if (resp.data.content === 1) {
        //           this.$message.success("修改成功");
        //           this.dialogFormVisible = false;
        //         } else {
        //           this.$message.error("出现异常.请联系管理员");
        //         }
        //       }
        //     });
        //   }
        // });
      }
    },
    async logoutFn() {
      let resp = await logout();
      if (200 == resp.code) {
        localStorageUtil.clearSessionData()
        this.$router.push({ path: "/login" });
      } else {
        this.$message({
          message: "登出失败",
          type: "error",
        });
        this.$router.push({ path: "/login" });
      }
    }
  },
  updated() {
    let userInfo = localStorageUtil.getUserInfo();
    this.username = userInfo.user_name;
  },
  mounted: function() {
    let userInfo = localStorageUtil.getUserInfo();
    this.username = userInfo.user_name;
    // this.$router.beforeEach((to,form,next)=>{
    //   globalEventBus.$emit('before_router');
    //   next();
    // });
  }
};
</script>

<style lang="less" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-header {
  width: 100%;
  background-color: #33C0FF;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    img {
      height: 30px;
    }
    span {
      margin-left: 15px;
    }
  }
}
.right_head {
  position: absolute;
  right: 20px;
  line-height: 60px;
}
.modifyButton {
  background-color: #33C0FF;
  color: #fff;
  border-color: #33C0FF;
  border-radius: 0px;
}
.modifyButton:focus,.modifyButton:hover {
  background-color: #33C0FF;
  color: #fff;
  border-color: #33C0FF;
  border-radius: 0px;
}
.head_logo {
  position: absolute;
  left: 20px;
}
</style>
